<template>
  <div id="account-security">
    <div class="member-nav">
      <ul class="member-nav-list">
        <li class="active">
          <router-link to="/member/account-safe">账户安全</router-link>
        </li>
      </ul>
    </div>
    <div class="safe-title">
      <el-alert
        title="安全提醒"
        type="warning"
        :closable="false"
        show-icon
      >
        <p>建议您启动全部安全设置，以保障账户及资金安全。</p>
        <p>确认您登录的是{{ site.site_name }}网址
          <a href="https://buyer-v723.shoptnt.cn" target="_blank">https://buyer-v723.shoptnt.cn</a>
          ，注意防范进入钓鱼网站，不要轻信各种即时通讯工具发送的商品或支付链接，谨防网购诈骗。
        </p>
        <p>建议您安装杀毒软件，并定期更新操作系统等软件补丁，确保账户及交易安全。</p>
      </el-alert>
    </div>
    <div class="safe-item">
      <div class="fore1"><strong>登录密码</strong></div>
      <div class="fore2">
        <span v-if="!user.mobile">互联网账号存在被盗风险，建议您先绑定手机号。</span>
        <span v-else>互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</span>
      </div>
      <div class="fore3">
        <router-link v-if="!user.mobile" to="/member/bind-mobile">绑定</router-link>
        <router-link v-else to="/member/change-password">修改</router-link>
      </div>
    </div>
    <div class="safe-item">
      <div class="fore1"><strong>手机验证</strong></div>
      <div class="fore2">
        <span>您验证的手机：</span>
        <strong v-if="!user.mobile">未绑定手机</strong>
        <strong v-else>{{ user.mobile | secrecyMobile }}</strong>&nbsp;&nbsp;
        <span>若已丢失或停用，请立即更换，避免账户被盗</span>
      </div>
      <div class="fore3">
        <router-link v-if="user.mobile" to="/member/change-mobile">修改</router-link>
        <router-link v-else to="/member/bind-mobile">绑定</router-link>
      </div>
    </div>
    <div class="safe-item">
      <div class="fore1"><strong>邮箱验证</strong></div>
      <div class="fore2">
        <span v-if="!user.mobile">互联网账号存在被盗风险，建议您先绑定手机号。</span>
        <span v-if="user.mobile && !user.email">互联网账号存在被盗风险，建议您先绑定电子邮箱。</span>
        <span v-if="user.mobile && user.email">
          您验证的电子邮箱：
          <strong>{{ user.email }}</strong>&nbsp;&nbsp;
          <span>若已丢失或停用，请立即更换，避免账户被盗</span>
        </span>
      </div>
      <div class="fore3">
        <router-link v-if="!user.mobile" to="/member/bind-mobile">绑定</router-link>
        <router-link v-if="user.mobile && !user.email" to="/member/bind-email">绑定</router-link>
        <router-link v-if="user.mobile && user.email" to="/member/bind-email">修改</router-link>
      </div>
    </div>
    <div class="safe-item">
      <div class="fore1"><strong>支付密码</strong></div>
      <div class="fore2">
        <span>互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</span>
      </div>
      <div class="fore3">
        <router-link v-if="!isPassword" to="/member/change-paymentpassword">设置</router-link>
        <router-link v-else to="/member/change-paymentpassword">修改</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as API_Deposit from '@/api/deposit'

export default {
  name: 'account-safe',
  head() {
    return {
      title: `账户安全-${this.site.title}`
    }
  },
  data() {
    return {
      isPassword: ''
    }
  },
  computed: {
    ...mapGetters({
      user: 'user',
      site: 'site'
    })
  },
  mounted() {
    API_Deposit.checkPassword().then(response => {
      this.isPassword = response
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
.safe-title {
  margin-top: 10px;
  p {
    margin-top: 3px
  }
  a {
    color: $color-href
  }
  a:hover {
    color: $color-main
  }
}
.safe-item {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid #e6e6e6;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  /deep/ .fore1, .fore2, .fore3 {
    float: left;
    height: 32px;
    line-height: 32px;
  }
  .fore1 {
    width: 125px;
    text-align: left;
    font-family: \5FAE\8F6F\96C5\9ED1;
    font-size: 18px;
    padding-left: 25px;
  }
  .fore2 {
    border-left: 1px solid #E6E6E6;
    width: 450px;
    height: auto;
    line-height: 24px;
    padding: 4px 0 4px 15px;
  }
  .fore3 {
    text-align: center;
    width: 140px;
  }
}
</style>
